// 项目的根组件
// App ->index.js -> public/index.html(root)



import {useState} from "react";

const keyWord = "MangoPie"

function getData() {
  return "MangoPie";
}



const list = [
  { id: 1, name: "MangoPie" },
  { id: 2, name: "az" },
  { id: 3, name: "cgyt" },
]

const isLogin = true;

//定义模板类型
const articleType = 0  // 0 1 3 
// 定义核心函数()更具articleType的值返回不同的JSX模板
function getArticleTem() {
  if (articleType === 0) {
    return <dev>articleType为0</dev>
  } else if (articleType === 1) {
    return <dev>articleType是1</dev>
  } else if (articleType === 3) {
    return <dev>articleType是3</dev>
  }
}

// 定义组件
function Button(){
  return <button>Click Me</button>
}


function App() {


  const handleClick = (name, e) => {
    console.log("button被点击了", name, e)
  }

  const handleUseStateClick = () => {
    setCount(count + 1);
  }

  const [form, setForm] = useState({ name: "MangoPie" });
  const changeForm = () => {
    //错误写法
    // form,name = "az";
    //正确写法
    setForm({
      ...form,
      name: "cgyt"
    });
  }




  const [count, setCount] = useState(0);
  return (
    <div className="App">
      {/**useState修改状态的规则 */}
      <button onClick={changeForm}>
      修改后的form的name：{form.name}
      </button>

      {/**useState基础使用 */}
      <button onClick={handleUseStateClick}>
        {count}
      </button>

      <Button/>


      <button onClick={(e) => handleClick("MangoPie", e)}>click me</button>

      {/**实现复杂条件渲染 */}
      {getArticleTem()}

      this is App
      {/**jsx高频场景------使用引号传递字符串 */}
      {'this is message'}
      {/**jsx高频场景------识别js变量 */}
      {" " + keyWord + " "}
      {/**jsx高频场景------函数调用 */}
      {getData()}
      {/**jsx高频场景------使用js对象 */}
      <dev style={{ color: 'red' }}>MangoPie</dev>


      {/**实现列表渲染 */}
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>


      {/**实现基础条件渲染 */}
      {/**逻辑与 && */}
      {isLogin && <span>this is true</span>}

      {/**三元运算 */}
      {isLogin ? <span>MangoPie</span> : <span>please Login !!!</span>}



    </div>

  );
}
export default App;
